<template>
  <div class="login">
    <div class="header_img"></div>
    <div class="masg">
      <input type="text" placeholder="请输入手机号" v-model="userphone" />
      <input type="text" placeholder="请输入密码" v-model="userpassword" />
    </div>
    <div class="logins" @click="goindex">
      <p>登录</p>
    </div>
    <Toast v-show="show" :btnType="1" @submit="submit"></Toast>
    <div class="regist">
      <router-link to="/Register">
        <p>立即注册</p>
      </router-link>
      <span></span>
      <p>忘记密码</p>
    </div>

    <router-link to="/">
      <div class="backindex">
        <img src="../../assets/返回.jpg" alt="" />
        <p>回到首页</p>
      </div>
    </router-link>
    <!-- <slider-captcha /> -->
  </div>
</template>

<script setup>
import { setSession, getSession } from "../../utils/index.js"
import { Dialog } from 'vant';
import Toast from '../../components/Toast.vue'
import { post } from '../../utils/request.js'
import { useRoute, useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import sliderCaptcha from '../../components/SliderCaptcha.vue'


const route = useRoute()
const router = useRouter()
const show = ref()
let userphone = ref('')
let userpassword = ref('')

let regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
let regpass = /^[a-zA-Z]\w{5,17}$/




const goindex = async () => {
  let data = {
    'phone': userphone.value,
    "password": userpassword.value,
  }

  if (regPhone.test(userphone.value) && regpass.test(userpassword.value)) {
    let res
    try {
      res = await post('/login', data)
      Dialog.alert({ message: '登录成功' }).then(() => { router.push('/') })
      console.log(res);
      sessionStorage.setItem('token', res.result.token)
    } catch (err) {
      console.log(1);
      Dialog.alert({ message: '手机号或密码错误' }).then(() => { router.push('/Landing') })
    }
  }
  else {
    Dialog.alert({ message: '请输入正确的手机号和密码' }).then(() => { router.push('/Landing') })
  }

}

const submit = () => {
  router.push('/')
}


</script>

<style lang="scss" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header_img {
  margin: 1.4rem 0 0.4rem;
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background-color: pink;
}

.masg {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2.95rem;
  height: 1.12rem;

  input {
    width: 2.95rem;
    height: 0.4rem;
    border: none;
    outline: none;
    font-size: 0.16rem;
    text-indent: 0.2rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;

    &::-webkit-input-placeholder {
      color: #50c7fb;
      //   color: red;
    }
  }
}

.logins {
  margin: 0.16rem 0;
  width: 2.95rem;
  height: 0.48rem;
  background-color: #0091ff;
  text-align: center;
  line-height: 0.48rem;
  color: white;
  font-size: 0.16rem;
  border-radius: 0.05rem;
}

.regist {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.95rem;
  height: 0.48rem;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.14rem;

  p:first-child {
    margin-right: 0.2rem;
  }

  span {
    position: absolute;
    width: 0.01rem;
    height: 0.12rem;
    background-color: #50c7fb;
  }
  a {
    color: rgba(0, 0, 0, 0.5);
  }
}

.backindex {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0.7rem;
  left: 1.3rem;
  width: 1rem;
  height: 1rem;

  img {
    // position: fixed;
    width: 0.7rem;
    height: 0.7rem;
  }

  p {
    width: 100%;
    font-size: 0.16rem;
    color: #50c7fb;
    position: absolute;
    bottom: 0;
    text-align: center;
  }
}
</style>